<template>
	<view>
		<view class="bg-white pb-4">
			<y-tabs :list="tabsList" fixed @selected="selected"></y-tabs>
		</view>
		<view class="p-15">
			<text class="text-666 ">团队人数:{{total}}人</text>
		</view>

		<view class="bg-white p-10">

			<z-paging ref='paging' v-model="list" use-page-scroll @query="getList">
				<view class="flex flex-y-center grid-column-10 py-10 border-bottom-eee" v-for="(item,index) in list"
					:key='index'>
					<image :src="item.avatar" class="w-60 h-60 round-circle img_flex"></image>
					<view class="flex flex-column grid-gap-10 ml-16">
						<text>{{item.nickname}}</text>
						<text class="fs-13 text-999">{{item.create_at}}</text>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { $http } from '@/utils';
	const tabsList = reactive([
		{ name: '一级团队', id: 1 },
		{ name: '二级团队', id: 2 },
		{ name: '三级团队', id: 3 },
	])
	const query = ref({
		page: 1,
		limit: 10,
		type: 1
	})
	const paging = ref()
	const list = ref()
	const total = ref()

	const getList = (page, limit) => {
		query.value.page = page
		query.value.limit = limit
		$http.get('User/getTeam', query.value).then(res => {
			paging.value.complete(res.data.list)
			total.value = res.data.all
		})
	}

	const selected = (e) => {
		query.value.type = e.id
		paging.value.reload()
	}
</script>

<style>

</style>